<template>
  <div class="layout-padding">
    <div class="layout-padding-auto layout-padding-view">
      <avue-crud 
        ref="crud" 
        v-model="form" 
        :page="page" 
        :data="tableData" 
        :table-loading="tableLoading"
        :option="tableOption" 
        :before-open="handleOpenBefore" 
        @on-load="getList" 
        @search-change="searchChange"
        @search-reset="resetsearch" 
        @refresh-change="refreshChange" 
        @size-change="sizeChange"
        @current-change="currentChange" 
        @row-update="handleUpdate" 
        @row-save="handleSave" 
        @row-del="rowDel"
        @selection-change="handleSelectionChange">
        <template #menu-left="{}">
          <el-button class="filter-item" type="primary" v-auth="'alarm_alarmTypeConf_del'" :disabled="multiple" icon="delete" @click="handleDelete(selectObjs)">删除 </el-button>
        </template>
        <template #wayList-form>
          <el-select v-model="form.wayList" multiple placeholder="请选择告警方式">
            <el-option v-for="(item, index) in alarm_way" :key="index" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </template>
        <template #typeName-search>
          <el-select v-model="searchForm.typeCode" placeholder="请选择告警类型" filterable>
            <el-option v-for="(item, index) in alarmTypeData" :key="index" :label="item.typeName" :value="item.typeCode"></el-option>
          </el-select>
        </template>
        <template #senderList-form>
          <el-select v-model="form.senderList" filterable multiple placeholder="请选择推送用户">
            <el-option v-for="(item, index) in userListData" :key="index" :label="item.name" :value="item.userId"></el-option>
          </el-select>
        </template>
      </avue-crud>
    </div>
  </div>
</template>

<script lang="ts" name="alarmSetting" setup>
import { userList, fetchList, addObj, putObj, getObj, delObjs } from '/@/api/alarm/alarmsetting'
import { tableOption } from '/@/crud/alarm/alarmsetting';


import { validateNull } from '/@/utils/validate';
import { useMessage, useMessageBox } from '/@/hooks/message';
import { useDict } from '/@/hooks/dict';

const { alarm_way, alarm_level } = useDict('alarm_way', 'alarm_level');

const searchForm: any = ref({})
const form:any = ref({})
const tableLoading = ref(false)
const userListData:any = ref([])
const multiple = ref(true);
const selectObjs = ref([]) as any;
const page:any = ref({
  total: 0, // 总页数
  currentPage: 1, // 当前页数
  pageSize: 10, // 每页显示多少条
})
let tableData = ref([])
let alarmTypeData:any = ref([])

onMounted(() => {
  userList().then(res => {
    userListData.value  = res.data.records || []
  })
  getSelectList()
})


const getSelectList = () => {
  fetchList({ current: 1,size: 9999,}).then(res => {
    alarmTypeData.value = res.data.records || []
  })
}

//初始化获取数据
const getList = (page: any, params?: object) => {
  // tableLoading.value = true;
  fetchList(
    Object.assign(
      {
        current: page.currentPage,
        size: page.pageSize,
      },
      params
    )
  )
    .then((res) => {
      tableData.value = res.data.records || []
    })
    .catch(() => {
      tableLoading.value = false;
    });
}

//打开弹框
const handleOpenBefore = (show: Function, type: string) => {
  show();
}



// 多选事件
const handleSelectionChange = (objs: { id: string }[]) => {
  selectObjs.value = objs.map(({id}) => id);
  multiple.value = !objs.length;
};

//批量删除
const handleDelete = (selectObjs:Array<string>) => {
  useMessageBox().confirm('是否确认批量删除？').then(() => {
    delObjs(selectObjs).then(() => {
      useMessage().success('删除成功');
      getList(page);
      getSelectList()
    })
    .catch((err: any) => {
      useMessage().error(err.msg);
    });
  });
}
//单条删除
const rowDel = (row:any, index:number) => {
  useMessageBox().confirm('是否确认删除报警类型为 ' + row.typeName + '?').then(() => {
    delObjs([row.id]).then(() => {
      useMessage().success('删除成功');
      getList(page);
      getSelectList()
    })
    .catch((err: any) => {
      useMessage().error(err.msg);
    });
  });
}
//更新操作
const handleUpdate = (row:any, index:number, done:Function, loading:Function) => {
  putObj(row).then((data) => {
  if (data.data) {
      useMessage().success('修改成功');
    } else {
      useMessage().error('修改失败');
    }
    done();
    getList(page);
    getSelectList()
  })
  .catch(() => {
    loading();
  });
}
//新增操作
const handleSave = (row:any, done:Function, loading:Function) => {
  // row.sender = row.sender.join()
  // row.way = row.way.join()
  addObj(row)
    .then((res) => {
      if (res.data) {
        useMessage().success('添加成功');
      } else {
        useMessage().success('添加失败');
      }

      done();
      getList(page);
      getSelectList()
    })
    .catch(() => {
      loading();
    });
}
const sizeChange = (pageSize:number) => {
  page.pageSize = pageSize;
}
const currentChange = (current:number) => {
  page.currentPage = current;
}
const searchChange = (form:any, done:Function) => {
  page.currentPage = 1;
  page.pageSize = 10
  form.typeCode = searchForm.value.typeCode
  getList(page, form);
  done();
}
const refreshChange = () => {
  getList(page);
}
const resetsearch = () =>{
  searchForm.value.typeCode = ''
}
</script>
<style lang="scss" scoped>


</style>
